<script lang="ts" setup>
import { useMessage } from '@fl/hooks/web/use-message'

import PropItem from './prop-item.vue'

const emits = defineEmits(['attributeChange'])
const { createMessage } = useMessage()
const normalAttribute = defineModel<any>('normalAttribute', { required: true })

const newAttributeObj = defineModel<any>('newAttributeObj', { required: true })
const isShow = ref<boolean>(false)
const attributeName = ref<string>('')
const attributeValue = ref<string>('')

const attributeObj = ref<any>({})

function addProductAttribute() {
    isShow.value = true
}

function cancel() {
    isShow.value = false
}

function addAttribute() {
    if (!attributeName.value) {
        createMessage.warning('属性名称不能为空')
        return
    }

    if (normalAttribute.value.findIndex(item => item.attributeName === attributeName.value) !== -1) {
        createMessage.warning('属性名称不能重复')
        return
    }

    if (!attributeValue.value) {
        createMessage.warning('属性值不能为空')
        return
    }

    normalAttribute.value.push({
        attributeName: attributeName.value,
        attributeValue: JSON.stringify([{ id: attributeValue.value, value: attributeValue.value }]),
        isCustomerAttribute: 1,
        isSaleAttribute: 0,
        selectData: '',
    })

    isShow.value = false
    attributeName.value = ''
    attributeValue.value = ''
}

function optionsChange(e, item) {
    normalAttribute.value.forEach((obj) => {
        if (obj.attributeName === item.attributeName) {
            item.attributeValue = JSON.stringify(e.map((item) => {
                return {
                    id: item.value,
                    value: item.label,
                }
            }))
        }
    })
}

function attributeChange(e, item) {
    console.log(item, e, 'item')
    attributeObj.value[item.attributeId || item.attributeName] = {
        attributeCustomer: getAttributeCustomer(item.attributeName),
        attributeId: item.attributeId,
        attributeKey: item.attributeName,
        attributeValue: e.label,
        attributeValueId: '',
        // attributeValueId: item.isCustomerAttribute === 0 ? e.value : '',
        id: '',
        isCustomerAttribute: item.isCustomerAttribute || 0,
        isRequired: item.isRequired || 0,
        isSaleAttribute: item.isSaleAttribute,
    }
    console.log(attributeObj.value, 78)
    emits('attributeChange', attributeObj.value)
}

function getAttributeCustomer(name) {
    let arr = []
    normalAttribute.value.forEach((item) => {
        if (item.attributeName === name) {
            arr = JSON.parse(item.attributeValue)
        }
    })
    return arr
}

function delAttribute(name) {
    normalAttribute.value = normalAttribute.value.filter(item => item.attributeName !== name)
    if (Object.keys(attributeObj.value).length > 0) {
        delete attributeObj.value[name]
    }
    if (Object.keys(newAttributeObj.value).length > 0) {
        delete newAttributeObj.value[name]
    }
    emits('attributeChange', attributeObj.value)
}
</script>

<template>
    <div class="p-20 bg-white border-px border-[var(--el-border-color)] border-solid">
        <div class="text-20 font-500">
            普通属性
        </div>

        <div class="my-20 bg-[var(--el-border-color)] h-1 w-full" />

        <div class="grid grid-cols-3 gap-x-20 w-full lt-1k5:grid-cols-2">
            <div v-for="item in normalAttribute"
                 :key="item.id"
            >
                <PropItem v-model:selectData="item.selectData"
                          v-model:options="item.attributeValue"
                          :label="item.attributeName"
                          :attributeName="item.attributeName"
                          :is-required="Boolean(item.isRequired)"
                          :is-custom="Boolean(item.isCustomerAttribute)"
                          :is-sale="Boolean(item.isSaleAttribute)"
                          @options-change="optionsChange($event, item)"
                          @value-change="attributeChange($event, item)"
                          @del-attribute="delAttribute($event)"
                />
            </div>
        </div>

        <div v-if="isShow"
             class="flex"
        >
            <el-form-item label-width="100px"
                          label="属性名称"
                          required
            >
                <el-input v-model="attributeName"
                          require
                          placeholder="请输入属性名称"
                          clearable
                          style="width: 300px"
                />
            </el-form-item>

            <el-form-item label-width="100px"
                          class="ml20"
                          label="属性值"
                          required
            >
                <el-input v-model="attributeValue"
                          placeholder="请输入属性值"
                          clearable
                          style="width: 300px"
                />
            </el-form-item>

            <div>
                <el-button type="primary"
                           class="ml-20"
                           @click="addAttribute"
                >
                    添加
                </el-button>
            </div>

            <el-button type="primary"
                       class="ml-20"
                       @click="cancel"
            >
                取消
            </el-button>
        </div>

        <el-button type="primary"
                   class="mt-8"
                   @click="addProductAttribute"
        >
            <div class="i-ic:baseline-add size-16" />
            添加属性
        </el-button>
    </div>
</template>
